<template>
  <el-row>
    <!--    新建分类模态框 start-->
    <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="添加用户"
        width="30%">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-input v-model="password" placeholder="请输入密码" style="margin-top: 30px"></el-input>
      <el-select v-model="value" placeholder="请选择" style="margin-top: 30px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="newUser">添加用户</el-button>
  </span>
    </el-dialog>
    <!--    新建分类模态框 end-->
    <el-col :span="24">
      <el-button size="medium" type="primary" @click="dialogVisible = true">新增用户</el-button>
    </el-col>
    <el-col :span="24">
      <el-table
          :data="tableData"
          height="700"
      >
        <el-table-column
            label="用户名"
            prop="username"
        >
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="adminName"
        >
        </el-table-column>
        <el-table-column
            label="注册日期"
            prop="date"
        >
        </el-table-column>
        <el-table-column
            label="年龄"
            prop="age"
        >
        </el-table-column>
        <el-table-column
            label="性别"
            prop="Gender"
        >
        </el-table-column>
        <el-table-column
            label="工作年限"
            prop="JobAge"
        >
        </el-table-column>
        <el-table-column
            label="省局"
            prop="shengju"
        >
        </el-table-column>
        <el-table-column
            label="性别"
            prop="Gender"
        >
        </el-table-column>
        <el-table-column
            label="文化"
            prop="wenhua"
        >
        </el-table-column>

        <el-table-column
            label="权限"
            prop="auth"
        >
        </el-table-column>
        <el-table-column
        >
<!--          <template slot="header" slot-scope="{}">-->
<!--            <el-input-->
<!--                placeholder="输入关键字搜索"-->
<!--                size="mini"/>-->
<!--          </template>-->
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="userDelete(scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="userInfoDelete(scope.$index)">删除信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      tableData: [],
      username: "",
      password: "",
      dialogVisible: false,
      userInfo: false,
      options: [
        {
          value: 1,
          label: '普通用户'
        }, {
          value: 2,
          label: '管理员'
        }
      ],
      value: ''
    }
  },
  mounted() {
    function formatDate(date) {
      let d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      return [year, month, day].join('-');
    }

    // 获取用户列表
    this.$axios2.post("/user/list").then((res) => {
      let data = res.data.userList
      // 临时时间变量
      console.log(data)
      let date = ''
      for (let i = 0; i < data.length; i++) {
        let list = {}
        list.username = data[i].username
        date = data[i].CreatedAt
        list.date = formatDate(date)
        list.adminName = data[i].AdminName
        list.age = data[i].Age
        list.Gender = data[i].Gender
        list.JobAge = data[i].JobAge
        list.shengju = data[i].ShengJu
        list.wenhua = data[i].Wenhua

        if (data[i].role == "1") {
          list.auth = "普通用户"
        } else {
          list.auth = "管理员"
        }
        this.tableData.push(list)
      }
    })
  },
  methods: {
    // 删除用户
    userDelete(index) {
      let username = this.tableData[index].username
      this.$axios2.post("/user/delete", {
        'username': username
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '用户删除成功',
            type: 'success'
          });
          this.$router.go(0)
        } else {
          this.$message.error("用户删除失败！")
        }
      })
    },
    // 删除用户信息
    userInfoDelete(index) {
      let username = this.tableData[index].username
      this.$axios2.post("/DeleteAnswerInfo", {
        'username': username
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '用户删除成功',
            type: 'success'
          });
          this.$router.go(0)
        } else {
          this.$message.error("用户删除失败！")
        }
      })
    },
    // 关闭弹出框
    handleClose: function () {
      this.dialogVisible = false
    },
    userInfoClose: function () {
      this.userInfo = false
    },
    // 新建用户
    newUser: function () {
      this.$axios2.post('/new/user', {
        "username": this.username,
        "password": this.password,
        "role": this.value
      }).then((res) => {
        let data = res.data
        if (data.code != 200) {
          this.$message.error(data.msg);
        } else {
          this.$message({
            message: '用户添加成功',
            type: 'success'
          });
        }
        this.dialogVisible = false
        this.$router.go(0)
      })
    }
  }
}
</script>

<style scoped>

</style>